<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{name}}</p>
    <p k-text="name"></p>
    <p>{{age}}</p>
    <p>
      {{doubleAge}}
    </p>
    <input type="text" k-model="name">
    <button @click="changeName">呵呵</button>
    <div k-html="html"></div>
  </div>
  <!-- <script type="module" src="kvue.js"></script> -->
  <!-- <script src="compile.js"></script>
  <script src='eventEmitter.js'></script> -->
  <script type="module">
    import KVue from './kvue.js'
    import Compile from './compile.js'
    import EventEmitter from './eventEmitter.js'

    const app = new KVue({
      el: "#app",
      data: {
        name: 'I am test',
        age: '10',
        doubleAge: '20',
        html: '<button>这是一个按钮</button>'
      },
      created(){
        console.log('开始了');
        setTimeout(() => {
          console.log(this, '触发定时器'); // 为什么没有这句，定时器会不执行？
          this.name = 'w我是测试';
        }, 1500)
      },
      methods: {
        changeName() {
            this.name = '事件触发';
            this.age = 1;
        }
      },
    })
    // 测试
    let em = new EventEmitter()
    em.$on('click', ()=>{
      console.log('click');
    })

    em.$on('click', ()=>{
      console.log('click1');
    })

    em.$emit('click')
  </script>
</body>
</html>
